<template>
  <div style="border: 1px solid #ccc" class="edit-box">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor
      ref="Toolbars"
      style="height: 300px; overflow-y: hidden"
      v-model="value"
      :defaultConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
    />
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { ref, watch, onBeforeUnmount, shallowRef, onMounted } from 'vue';
const editorRef = shallowRef();
const value = ref('sssss');
const Toolbars = ref();
const seachShow = ref(false);
const props = defineProps({
  modelValue: {
    type: String,
  },
});
// clearStyle
const toolbarConfig = {
  insertKeys: {
    index: 3,
    keys: ['clearStyle'],
  },
  excludeKeys: [
    'headerSelect',
    'blockquote',
    'through',
    'ctrl+e',
    'sup',
    'sub',
    'code',
    'group-more-style',
    'bgColor',
    'color',
    'fontSize',
    'fontFamily',
    'lineHeight',
    'emotion',
    'insertLink',
    'fullScreen',
    'bulletedList',
    'numberedList',
    'insertTable',
    'codeBlock',
    'divider',
    'todo',
    'group-justify',
    'group-indent',
    'link',
    'group-image',
    'group-video',
    'editLink',
    'lineHeight',
    'checkLink',
    'parseLinkUrl',
    'font',
    'image',
    'uploadImage',
    'insertVideo',
  ],
};
const editorConfig = { placeholder: '请输入内容...', maxLength: 5000 };
const emit = defineEmits(['onEnterValue', 'update:modelValue']);
const blur = () => {
  //输入框消失
  seachShow.value = false;
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // console.log(editorRef.getConfig().toolbarKeys);
};
const handleChange = (editor) => {
  // console.log('change:', editor.children);
  let str = removeHtmlTags(value.value);
  if (str) {
    emit('update:modelValue', value.value);
  } else {
    emit('update:modelValue', '');
  }

  // let arr = Toolbars.getAllMenuKeys();
  // console.log(arr);
};
const removeHtmlTags = (html: string) => {
  return html.replace(/<[^>]+>/g, ''); // 使用正则表达式将所有HTML标签替换为空字符串
};
const handleDestroyed = (editor) => {
  console.log('destroyed', editor);
};
const handleFocus = (editor) => {
  console.log('focus', editor);
};
const handleBlur = (editor) => {
  console.log('blur', editor);
};
const customAlert = (info, type) => {
  // alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
  console.log('ClipboardEvent 粘贴事件对象', event);
  const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
  const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
  // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
  // console.log(text, '1111111111111111111');
  // 自定义插入内容
  editor.insertText(text);

  // 返回 false ，阻止默认粘贴行为
  event.preventDefault();
  callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）

  // 返回 true ，继续默认的粘贴行为
  // callback(true)
};
onMounted(() => {
  // setTimeout(() => {
  //   value.value = props.modelValue;
  // }, 500);
});
value.value = props.modelValue;
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
watch(
  () => props.modelValue,
  () => {
    if (!props.modelValue) {
      value.value = '';
    } else {
      value.value = props.modelValue;
    }
  },
  { deep: true },
);
watch(
  () => value.value,
  () => {
    let str = removeHtmlTags(value.value);
    if (str) {
      emit('update:modelValue', value.value);
    } else {
      emit('update:modelValue', '');
    }
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.edit-box {
  width: 100%;
}
:deep(.w-e-scroll) {
  height: calc(100% - 30px);
}
:deep(*) {
  font-family: PingFangSC-Regular, PingFang SC;
}
:deep(.w-e-hover-bar) {
  display: none;
}
</style>
